import React from 'react'
import '../assets/css/register.css'
import Top from '../components/top'
import { Register } from '../request/app'

class Home extends React.Component {

    constructor() {
        super()
        this.state = {
            user: {
                phone: '',
                nickname: "",
                password: ''
            }
        }
    }

    zhuc(type, e) {
        this.setState({
            user: {
                ...this.state.user,
                [type]: e.target.value
            }
        })


    }
    //封装一个注册事件
    register() {
      
        console.log(Register());
        console.log(this.state.user);

        if(
            this.state.user.phone ==="" ||
            this.state.user.nickname ==="" || this.state.user.password ==="" ){
            alert('关键内容不能为空')
            return;
        }

        let str = /^1[3-9]\d{9}$/;

        if(!str.test(this.state.user.phone)){
            alert('手机号格式不对')
            return;
        }

        //调用注册接口
        
        Register(this.state.user)
            .then(res => {
                if(res.code==200){
                    alert(res.msg)
                    window.open('/login')
                }
                console.log(res, '响应');
            })
    }

    dl(){
        window.open('/login')
    }


    render() {

        return (<div className='register'>
            <div className='top'>
                <Top />

                <div className='top_om'>
                    {/* 点击事件 */}
                    <div>&lt;</div>
                    <div>注册账号</div>
                    <div>13</div>
                </div>


            </div>

            {/*  */}
            <div className='center'>
                <img src={require('../assets/img/u选.png')} alt="" />
                {/*  */}
                <h2>登录之后更精彩</h2>
                <h4>小u伴你每一天</h4>
                {/*  */}
                <div className='ton'>
                    <div>
                        <input onChange={this.zhuc.bind(this, 'nickname')} type="text" placeholder='昵称' />
                    </div>
                    <div>
                        <input onChange={this.zhuc.bind(this, 'phone')} type="text" placeholder='手机号' />
                    </div>
                    <div>
                        <input onChange={this.zhuc.bind(this, 'password')} type="text" placeholder='密码' />
                    </div>


                </div>
                {/*  */}
                <p>认证服务由中国联通统一提供 <span>已有帐号？<u onClick={this.dl.bind()}>去登录</u></span></p>
                <p className='p2'><label > <input type="checkbox" />同意</label><span>《中国联通认证服务服务条款》</span></p>

                <div className='btn'>
                    <button onClick={this.register.bind(this)}>点击注册</button>
                </div>
                {/*  */}

                {/* 点击事件 */}
                <div className='end'>
                    <p>其他登陆方式</p>
                    <img src={require('../assets/img/icon_wechat@3x.png')} alt="" />

                </div>
            </div>

        </div>)

    }
}
export default Home